/*
 * @Author: 肖思汗 
 * @Date: 2025-06-24 22:48:12 
 * @Last Modified by: xiehangyunhangyun
 * @Last Modified time: 2025-07-29 16:28:25
 */

import { ArrowLeft } from "@nutui/icons-react-taro";
import { NavBar } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import { Image, Text, View } from "@tarojs/components";
import clsx from "clsx";
import { autorun } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useRef, useState } from "react";
import utilsStore from "../../utils/utilsStore";
import styles from "./pageLayer.module.less";
import logoPNG from "@/public/smallLogo.png";
import indexPNG from "../CustomTabBar/img/index.png";
import indexPNG_hover from "../CustomTabBar/img/index_hover.png";
import userPNG from "../CustomTabBar/img/user.png";
import userPNG_hover from "../CustomTabBar/img/user_hover.png";


interface Iprops {
    title?: string; // 默认"优T定制"
    hasHeader?: boolean; // 显示头部
    showBack?: boolean; // 显示返回按钮
    backText?: ReactNode; // 自定义返回按钮
    onBack?: () => void;

    hasTabBar?: boolean; // 显示底部导航栏
    className?: string;
    children?: ReactNode;
    style?: React.CSSProperties;

    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
    onTouchMove?: (e: React.TouchEvent<HTMLDivElement>) => void;
    onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
}

// 页面布局组件 - 遵循规范：所有样式都必须写到对应的module.less文件中，但内联样式中有变量的情况除外
const PageLayer = observer((props: Iprops) => {

    const [path, setPath] = useState("");

    const hasHeader = [undefined, true].includes(props.hasHeader);
    const hasTabBar = [undefined, true].includes(props.hasTabBar);

    const goBack = (e: any) => {
        e.stopPropagation();
        e.preventDefault();
        if (props.onBack) {
            props.onBack();
            return;
        }
        Taro.navigateBack({
            fail: () => {
                Taro.switchTab({ url: '/pages/Index/Index' });
            }
        });
    };

    const safeAreaBottomValue = utilsStore.safeAreaBottom > 0 ? utilsStore.safeAreaBottom : "20rpx";
    const tabs = [
        {
            icon: indexPNG,
            icon_hover: indexPNG_hover,
            text: '选款式',
            path: '/pages/Index/Index'
        },
        {
            icon: userPNG,
            icon_hover: userPNG_hover,
            text: '选花型',
            path: '/subPages/User/User'
        },
        {
            icon: userPNG,
            icon_hover: userPNG_hover,
            text: '订单',
            path: '/subPages/User/User'
        },
        {
            icon: userPNG,
            icon_hover: userPNG_hover,
            text: '用户中心',
            path: '/subPages/User/User'
        },
    ];

    return (
        <div
            className={clsx(
                styles.pageLayer,
                props.className,
                hasHeader && styles.hasHeader,
                hasTabBar && styles.hasTabBar,
            )}
            style={{
                paddingTop: hasHeader ? utilsStore.titleTop : 0,
                paddingBottom: hasTabBar ? utilsStore.barBottom : 0,
                ...(props.style || {}),
            }}
            onTouchStart={props.onTouchStart}
            onTouchMove={props.onTouchMove}
            onTouchEnd={props.onTouchEnd}
        >
            {
                [undefined, true].includes(props.hasHeader) && (
                    <View
                        className={clsx(styles.customHeader)}
                        style={{
                            paddingTop: utilsStore.safeAreaTop,
                            height: utilsStore.titleTop
                        }}
                    >
                        <NavBar
                            className={styles.navBar}
                            back={props.showBack ? (props.backText ? (<><ArrowLeft />{props.backText}</>) : <ArrowLeft />) : null}
                            right={null}
                            onBackClick={goBack}
                            style={{ lineHeight: '44' }}
                        >
                            <Image className={styles.icon} src={logoPNG} />
                            <Text className={styles.title}>{props.title || '全民制定'}</Text>
                        </NavBar>
                    </View>
                )
            }

            {props.children}

            {[undefined, true].includes(props.hasTabBar) && (
                <View
                    className={clsx(
                        styles.customTabBar,
                        utilsStore.safeAreaBottom > 0 && styles.hasSafeArea
                    )}
                    style={{ paddingBottom: safeAreaBottomValue }}
                >
                    <View className={styles.header} />
                    <View className={styles.body}>
                        {tabs.map((tab) => {
                            const icon = (path === tab.path) ? tab.icon_hover : tab.icon;
                            return (
                                <View
                                    key={tab.path}
                                    className={clsx(styles.tab_item, (path === tab.path) ? styles.active : '')}
                                    onClick={() => {
                                        // eslint-disable-next-line no-debugger
                                        debugger;
                                        console.log(tab.path);
                                        console.log(tab.path?.startsWith("/pages"));
                                        if (tab.path?.startsWith("/pages")) {
                                            Taro.switchTab({ url: tab.path });
                                        } else {
                                            Taro.navigateTo({ url: tab.path });
                                        }
                                    }}
                                >
                                    <Image
                                        mode="heightFix"
                                        src={icon}
                                        className={styles.tab_icon}
                                    />
                                    {tab.text === '购物车' && 1 > 0 && (
                                        <Text className={styles.badge}>{1}</Text>
                                    )}
                                    <View className={styles.tab_text}>{tab.text}</View>
                                </View>
                            );
                        })}
                    </View>
                </View>
            )}
        </div>
    );
});

export default PageLayer;